<template>
  <div class="content">
    <h1 class="title">{{title}}</h1>
    <input type="text" v-model="newItem"/>
    <button @click="doAdd">添加</button>
    <ul class="list">
      <li
        class="list__item"
        v-for="(item, index) of items"
        v-on:click="finished(item)"
      > 
        <div class="checkWrap">
          <label :for="index">ww</label>
          <input type="checkbox" :id="index" :checked="item.finish">
        </div>
        <p v-bind:class="['list__item__text', {finished: item.finish}]">{{item.label}}</p>
        <i class="list__item__close" v-on:click.stop="delItem(index)"></i>
      </li>
    </ul>
    <p>childTetx:{{childText}}</p>
    <foot
      msg="fater"
      v-on:catch-child="listen"
    ></foot>
  </div>
</template>

<script>
  import Store from './store.js';
  import Foot from './components/foot.vue'; //导入组件

  export default {
    // 组件注册
    components: { Foot },

    // 刚挂载
    created() {
      console.log('initialized!');
      Store.fetch();
    },

    // 挂载完毕，可获取dom
    mounted() {
      console.log('mounted!');
    },

    // 类似状态
    data() {
      return {
        title: 'my-todo-list',
        items: Store.fetch() || [],
        newItem: '',
        childText: '',
      };
    },
    computed: { // 计算
      length() {
        return this.content.length;
      },
    },

    // 数据监听
    watch: {
      items: { // 监听items 
        handler: function(items) {
          // items 有变化重新保存
          Store.save(items);
        },
        deep: true, // 深度监听
      }
    },
    // 方法
    methods: {
      // sayHi() {
      //   alert('hi');
      //   this.$emit('changeA', 2);
      // },
      doAdd() {
        this.items.push({
          label: this.newItem,
          finish: false,
        });
        this.newItem = '';
      },
      finished(item) {
        item.finish = !item.finish;
      },
      delItem(index) {
        this.items = [
          ...this.items.slice(0, index),
          ...this.items.slice(index + 1),
        ]
      },
      listen(msg) {
        this.childText = msg;
      }
    }
  }
</script>

<style>
  .content {
    width: 512px;
    margin: 0 auto;
    text-align: center;
    color: #333;
  }
  .title {
    padding: 20px 0;
    text-align: center;
    font-weight: bold;
  }
  .list {
    text-align: left;
  }
  .checkWrap {
    float: left;
    width: 10%;
  }
  .list__item {
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
  }
  .list__item__text {
    float: left;
    width: 80%;
  }
  .list__item__close {
    position: relative;
    width: 40px;
    height: 40px;
    float: left;
  }
  .list__item__close::before,
  .list__item__close::after {
    position: absolute;
    display: block;
    content: '';
    width: 2px;
    height: 15px;
    top: 50%;
    left: 50%;
    background: #999;
  }
  .list__item__close::before {
    transform: translate(-50%, -50%) rotateZ(-45deg);
  }
  .list__item__close::after {
    transform: translate(-50%, -50%) rotateZ(45deg);
  }
  .finished {
    text-decoration: line-through;
  }
</style>